<template>
	<view>
		<u-navbar back-text="返回" title="我的简历" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }" back-icon-color="#108EE9">
			<view class="slot-wrap">
				<view class="topBox">
					<view class="top-fill">
						
					</view>
					<view class="clear-all" @click="goEdit">
						编辑
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="top-card">
				<view class="head-box">
					<view class="head-img">
						<image class="head-url" src="../../../static/images/develop/headimg.png" mode=""></image>
						<image class="authen-url" src="../../../static/images/home/authicon.png" mode=""></image>
					</view>
					<view class="head-right">
						<view class="head-right-inbox">
							<view class="head-name">
								张三
							</view>
							<view class="now-work">
								正在找工作
							</view>
							<view class="grade-icon">
								<image src="../../../static/images/common/grade-icon.png" mode=""></image>
							</view>
							<view class="grade-num">
								5.0
							</view>
						</view>
						<view class="head-right-bottom-box">
							<view>
								男
							</view>
							<view class="age-text">
								33岁
							</view>
							<view>
								汉族
							</view>
						</view>
					</view>
				</view>
				<view class="user-info-box">
					<view class="info-item">
						<view class="info-left">
							工龄:
						</view>
						<view class="info-right">
							8年
						</view>
					</view>
					<view class="info-item">
						<view class="info-left">
							所在城市:
						</view>
						<view class="info-right">
							成都市
						</view>
					</view>
					<view class="info-item">
						<view class="info-left">
							身份:
						</view>
						<view class="info-right">
							组长
						</view>
					</view>
					<view class="info-item">
						<view class="info-left">
							工种:
						</view>
						<view class="info-right">
							建筑木工 | 打墙工 | 切割工
						</view>
					</view>
					<view class="info-item">
						<view class="info-left">
							熟练度:
						</view>
						<view class="info-right">
							高级工
						</view>
					</view>
					<view class="info-item">
						<view class="info-left">
							期望工作地:
						</view>
						<view class="info-right">
							成都市
						</view>
					</view>
					<view class="info-item">
						<view class="info-left">
							联系电话:
						</view>
						<view class="info-right">
							12345678912
						</view>
					</view>
				</view>
			</view>
			<view class="about-card">
				<view class="introduce-card">
					<view class="introduce-title">
						自我介绍
					</view>
					<view class="introduce-text">
						主要做后浇带施工缝剔打，胀模，爆模，拆墙等等一系列工作,我很优秀,是你的最佳选择!
					</view>
				</view>
				<view class="introduce-card">
					<view class="introduce-title">
						职业技能
					</view>
					<view class="introduce-text">
						主要各种职业技能,水泥,及建筑,工地
					</view>
				</view>
				<view class="experience-out-title">
					项目经验
				</view>
				<block v-for="(item,index) in list" :key="index">
					<view class="experience-box">
						<view class="experience-box-title">
							2019.02.04-2019.04.08 <text>四川省</text>成都市
						</view>
						<view class="experience-address">
							天府新区第八幼儿园
						</view>
						<view class="experience-text">
							主要做后浇带施工缝剔打，胀模，爆模，拆墙等等一系列工作
						</view>
						<view class="experience-img-box">
							<image src="../../../static/images/develop/hometopicon.png" mode=""></image>
							<image src="../../../static/images/develop/hometopicon.png" mode=""></image>
							<image src="../../../static/images/develop/hometopicon.png" mode=""></image>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[1,2]
			}
		},
		onLoad() {
		},
		onReady() {
		},
		methods: {
			goEdit(){
				this.$u.route({
					url: 'pages/home/resume/edit',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		.topBox {
			width: 100%;
			display: flex;
			.top-fill{
				flex: 1;
			}
			.clear-all{
				font-size:28rpx;
				line-height:44rpx;
				color:rgba(211,176,104,1);
				opacity:1;
			}
		}
	}

	.content {
		width: 100%;
		.top-card{
			padding: 30rpx;
			box-sizing: border-box;
			width: 100%;
			border-bottom: 10rpx solid rgba(245,245,245,1);
			.head-box{
				display: flex;
				.head-img{
					width: 110rpx;
					height: 110rpx;
					position: relative;
					.head-url{
						width: 110rpx;
						height: 110rpx;
					}
					.authen-url{
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
				.head-right{
					margin-left: 20rpx;
					.head-right-inbox{
						display: flex;
						.head-name{
							font-size:28rpx;
							font-weight:bold;
							line-height:37rpx;
							color:rgba(51,51,51,1);
							opacity:1;
							margin-top: 2rpx;
						}
						.now-work{
							width:140rpx;
							height:40rpx;
							background:rgba(0,204,204,1);
							opacity:1;
							border-radius:60rpx;
							text-align: center;
							line-height: 40rpx;
							font-size:22rpx;
							color:rgba(255,255,255,1);
							margin-left: 26rpx;
						}
						.grade-icon{
							margin-left: 30rpx;
							margin-top: 4rpx;
							image{
								width: 33rpx;
								height: 33rpx;
							}
						}
						.grade-num{
							margin-left: 10rpx;
							margin-top: 4rpx;
							font-size:26rpx;
							font-weight:400;
							line-height:35rpx;
							color:rgba(51,51,51,1);
							opacity:1;
						}
					}
					.head-right-bottom-box{
						display: flex;
						margin-top: 20rpx;
						font-size:24rpx;
						font-weight:400;
						line-height:32rpx;
						color:rgba(51,51,51,1);
						opacity:1;
						.age-text{
							margin-left: 26rpx;
							margin-right: 22rpx;
						}
					}
				}
			}
			.user-info-box{
				margin-top: 20rpx;
				width: 100%;
				.info-item{
					margin-top: 22rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					.info-left{
						font-size:26rpx;
						font-weight:400;
						line-height:35rpx;
						color:rgba(153,153,153,1);
						opacity:1;
					}
					.info-right{
						font-size:28rpx;
						font-weight:400;
						line-height:37rpx;
						color:rgba(51,51,51,1);
						opacity:1;
					}
				}
			}
		}
		.about-card{
			padding: 0 30rpx 30rpx;
			width: 100%;
			box-sizing: border-box;
			.introduce-card{
				padding: 30rpx 0;
				border-bottom: 1rpx solid rgba(223,223,223,1);
			}
			.experience-out-title{
				margin-top: 30rpx;
				font-size:28rpx;
				font-weight:400;
				line-height:37rpx;
				color:rgba(51,51,51,1);
				opacity:1;
			}
			.introduce-title{
				font-size:28rpx;
				font-weight:400;
				line-height:37rpx;
				color:rgba(51,51,51,1);
				opacity:1;
				margin-bottom: 24rpx;
			}
			.introduce-text{
				font-size:24rpx;
				font-weight:400;
				line-height:32rpx;
				color:rgba(51,51,51,1);
				opacity:1;
			}
			.experience-box{
				width: 100%;
				box-sizing: border-box;
				margin-top: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid rgba(223,223,223,1);
				.experience-box-title{
					font-size:24rpx;
					font-weight:400;
					line-height:32rpx;
					color:rgba(153,153,153,1);
					opacity:1;
					text{
						display: inline-block;
						margin: 0 20rpx;
					}
				}
				.experience-address{
					margin: 20rpx 0 30rpx;
					font-size:28rpx;
					font-weight:bold;
					line-height:37rpx;
					color:rgba(51,51,51,1);
					opacity:1;
				}
				.experience-text{
					margin-bottom: 20rpx;
					font-size:24rpx;
					font-weight:400;
					line-height:32rpx;
					color:rgba(51,51,51,1);
					opacity:1;
				}
				.experience-img-box{
					display: flex;
					justify-content: space-between;
					image{
						width: 210rpx;
						height: 160rpx;
						border-radius:10rpx;
					}
				}
			}
		}
	}
</style>
